<script lang="ts">
export default {
  name: "antDv2",
};
</script>
<script setup lang="ts">
//
</script>

<template>
  <div>
    <svg
      id="mysvg"
      xmlns="https://www.baidu.com/"
      viewBox="0 0 800 600"
      preserveAspectRatio="xMidYMid meet"
    >
      <circle id="mycircle" cx="400" cy="300" r="50" />
    </svg>
    <svg width="100%" height="100%">
      <circle id="mycircle" cx="50" cy="50" r="50" class="blue" />
    </svg>
    <svg width="300" height="180">
      <circle cx="30" cy="50" r="25" />
      <circle cx="90" cy="50" r="25" class="red" />
      <circle cx="150" cy="50" r="25" class="fancy" />
    </svg>
    <svg width="300" height="180">
      <line
        x1="0"
        y1="0"
        x2="200"
        y2="0"
        style="stroke: rgb(0, 0, 0); stroke-width: 5"
      />
    </svg>
  </div>
</template>

<style lang="less" scoped>
.blue {
  fill: blue;
}

.red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}
</style>
